<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>yosong</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <script src="/static/js/jquery-3.5.1.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/scrollReveal.min.js"></script>
  <style>
    .nav-link:hover{
      background-color: #fff435;
    }
    .aaa{
      width: 100%;
      position: absolute;
      top:70vh;
      text-align: center;
    }
    .bbb:hover{
      background-color: #ffaa14;
      border: 1px solid #ffaa14;
    }
    .bbb{
      border: 1px solid #ffaa14;
    }
    .ccc{
      display: flex;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
      background-size: 100% 100%; /*宽高都100%*/
    }
  </style>
</head>
<body>
<!--导航-->
<div class="container-fluid bg-light py-3">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">Yosong</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">首页 <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item d-inline-flex">
            {% if session %}
                <a class="nav-link" href="/home">
                    {% for user in usermessage %}
                        <img src="/media/{{ user.uphoto }}" style="height: 35px; width: 35px; border-radius: 50%" alt="">
                    {% endfor %}
                </a>
                <div class="mt-1">|</div>
                <a class="nav-link" href="/out">退出</a>
            {% else %}
                <a class="nav-link" href="/login">登录</a>
                <div class="mt-1">|</div>
                <a class="nav-link" href="/reg">注册</a>
            {% endif %}
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

{% block lunbotu %}

{% endblock %}


{% block main %}

{% endblock %}

<div class="row mt-3 mx-2">
            <nav class="m-auto" aria-label="Page navigation example">
              <ul class="pagination">
                  {% if page.has_previous %}
                      <li class="page-item"><a class="page-link text-dark" href="?page={{ page.previous_page_number }}">上一页</a></li>
                  {% endif %}

                  {% for page_number in page.paginator.page_range %}
                        {% if page_number <= 1 %}
                        {% else %}
                            {% for page_number in page.paginator.page_range %}
                                {% if page_number == page.number %}
                                    <li class="page-item"><div class="page-link text-dark bg-danger" href="?page={{ page_number }}">{{ page_number }}</div></li>
                                {% else %}
                                    <li class="page-item"><a class="page-link text-dark" href="?page={{ page_number }}">{{ page_number }}</a></li>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                  {% endfor %}

                  {% if page.has_next %}
                        <li class="page-item">
                            <a class="page-link text-dark"  href="?page={{ page.next_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                  {% endif %}
              </ul>
            </nav>
        </div>

<!--底部-->
<div class="container-fluid m-0 p-0">
  <div class="jumbotron jumbotron-fluid m-0">
    <div class="container">
      <h1 class="display-4">Fluid jumbotron</h1>
      <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
    </div>
  </div>
</div>
</body>
<script>
  (function () {
    window.scrollReveal = new scrollReveal({ reset: true });
  })();
</script>
</html>